<template>
  <el-card class="box">
    <el-input v-model="key" placeholder="请输入可爱的暗号" style="width:100%;margin-bottom: 10px"></el-input>
    <el-button type="danger" size="mini" @click="pong">砰！</el-button>
  </el-card>
</template>

<script>
import { ref } from 'vue';
import md5 from 'js-md5';

export default {
  name: 'Door',
  methods: {
    pong() {
      if (md5(this.key) === 'b8977f0f4b92bbe1e74318786a6a7ed1') {
        console.log('暗号正确');
        let yy = document.getElementById('yy');
        console.log(yy);
        yy.play();
        this.$router.push('/001');
      } else {
        console.log('暗号错误');
        this.$notify({
          title: '。。。',
          message: '哎呀，暗号不对呢',
          type: 'warning'
        });
      }
    }
  },
  data(){
    return {
      key: ref('')
    }
  }
}
</script>

<style scoped>
.box {
  float: top;
  position: relative;
  top: 40%;
  text-align: center;
  margin: 0 8px;
}
</style>
